<template>
  <div class="account_page">
    <CommonHeader :title="isManage ? '退出账号登录' : '切换账号'">
      <template v-slot:right>
        <el-icon @click="isManage = !isManage" v-if="!isManage" size="24"
          ><Setting
        /></el-icon>
        <el-icon @click="isManage = !isManage" v-else size="24"
          ><Check
        /></el-icon>
      </template>
    </CommonHeader>
    <div class="account_content page_no_tab_bar">
      <!-- 账号列表 -->
      <ul class="account_list">
        <li v-for="(item, index) in accountList" :key="index">
          <div class="left"><img :src="item.avatar" alt="" /></div>
          <div class="center">
            <div class="username">{{ item.username }}</div>
            <div class="phone font_color">{{ item.phone }}</div>
          </div>
          <div class="right">
            <div v-if="item.isLogin && !isManage" class="add_text">当前登陆</div>
            <div v-if="!item.isLogin && !isManage" class="primary_btn">切换</div>
            <div v-if="isManage" class="delete_btn">删除</div>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="@/assets/profile/account/add_icon.png" alt="" />
          </div>
          <div class="center">添加账号</div>
          <div></div>
        </li>
      </ul>
      <!-- 添加账号 -->
      <div class="add_account"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import AvatarImg from "@/assets/profile/avatar_img.png";

// 是否管理
const isManage = ref(false);

// 账号列表
const accountList = ref([
  {
    avatar: AvatarImg,
    username: "曾小贤",
    phone: "177 **** 8542",
    isLogin: true,
  },
  {
    avatar: AvatarImg,
    username: "吕子乔",
    phone: "185 **** 4895",
    isLogin: false,
  },
]);
</script>

<style lang="scss" scoped>
.account_page {
  .account_content {
    padding-top: 10px;
    .account_list {
      li {
        background-color: #141515;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 10px;
        .left {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .center {
          margin: 0px 10px;
          flex: 1;
          .username {
            margin-bottom: 5px;
          }
          .font_color {
            font-size: 14px;
          }
        }
        .right {
          .primary_btn,
          .delete_btn {
            padding: 5px 15px;
            border-radius: 5px;
          }
        }
      }
      &>li:last-child {
        .left {
          overflow: visible;
        }
        .center {
          margin-left: 20px;

        }
      }
    }
  }
}
</style>
